<template>
  <div id="app">
    <div class="header">
      <router-link to="/" class="nav-title" :style='movieActiveStyle'>电影</router-link>
      <router-link :to='bookFirstRoute' class="nav-title" :style='bookActiveStyle'>读书</router-link>
    </div>
    <div class="main">
      <ul class="sider">
        <li v-for="(item, index) in siderRoutes" :key="index">
          <router-link :to='item.path' class="nav-text">{{item.meta.displayname}}</router-link>
        </li>
      </ul>
      <router-view class="content"></router-view>
    </div>
  </div>
</template>

<script>
import { routes, series } from './router'

export default {
  data: function () {
    return {
      bookFirstRoute: `/b/series/${series[0].id}`
    }
  },
  computed: {
    siderRoutes () {
      switch (this.$route.meta.group) {
        // 读书
        case 'b':
          // 更新nav bars
          const res = []
          routes['b'].map(item => {
            if (item.path.includes(':')) {
              // 动态路由
              const index = item.path.indexOf(':')
              const pathPrefix = item.path.substring(0, index)
              const temp = series.map(serie => {
                return {
                  path: pathPrefix + serie.id,
                  meta: {
                    displayname: serie.name,
                    group: 'b'
                  }
                }
              })
              res.push(...temp)
            } else {
              res.push(item)
            }
          })
          return res
        // 电影
        case 'm':
          // 更新nav bars
          return routes['m']
      }
    },
    movieActiveStyle () {
      if (this.$route.meta.group === 'm') {
        return { fontWeight: 'bold' }
      }
      return { fontWeight: 'normal' }
    },
    bookActiveStyle () {
      if (this.$route.meta.group === 'b') {
        return { fontWeight: 'bold' }
      }
      return { fontWeight: 'normal' }
    }
  }
}
</script>

<style>
  * {
    text-decoration: none;
  }
</style>
<style lang="less" scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  .header {
    background-color: rgb(228, 242, 228);

    .nav-title {
      font-size: 25px;
      color: green;
    }
  }

  .main {
    display: flex;
    position: relative;
    padding: 20px 20%;

    .sider {
      margin: 0;
      padding: 0;
      width: 200px;
      list-style:none;
      text-align: left;

      li {
        .nav-text {
          display: block;
          color: rgb(20, 20, 20);
        }

        .router-link-exact-active {
            color:green;
            background-color: rgb(228, 242, 228);
          }
        }
    }

    .content {
      width: 100%;
      position: relative;
    }
  }
}
</style>
